{% extends "base.html" %}

{% block title %}我的评价 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}我的评价{% endblock %}

{% block extra_css %}
<style>
    /* 优化后的现代化设计 */
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem 0;
        margin-bottom: 2rem;
        border-radius: 0 0 1rem 1rem;
    }

    .stats-overview {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        margin-bottom: 2rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }

    .stat-item {
        text-align: center;
        padding: 1rem;
        border-radius: 8px;
        background: #f8f9fa;
        border-left: 4px solid #667eea;
    }

    .stat-number {
        font-size: 1.8rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
        color: #6c757d;
        font-weight: 500;
    }

    /* 紧凑的筛选区域 */
    .filter-panel {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        margin-bottom: 2rem;
    }

    .filter-panel h6 {
        color: #495057;
        margin-bottom: 1rem;
        font-weight: 600;
    }

    .filter-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1rem;
        align-items: end;
    }

    /* 简化的评价卡片 */
    .evaluation-list {
        display: grid;
        gap: 1rem;
    }

    .evaluation-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
        position: relative;
    }

    .evaluation-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.12);
        border-color: #667eea;
    }

    .evaluation-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 1rem;
    }

    .evaluation-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-completed {
        background: #d4edda;
        color: #155724;
    }

    .status-pending {
        background: #fff3cd;
        color: #856404;
    }

    .status-partial {
        background: #cce7ff;
        color: #0066cc;
    }

    .evaluation-meta {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1rem;
        font-size: 0.875rem;
        color: #6c757d;
        flex-wrap: wrap;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .meta-item i {
        width: 16px;
        text-align: center;
        color: #667eea;
    }

    /* 评分展示 */
    .ratings-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .rating-item {
        padding: 0.75rem;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 3px solid #667eea;
    }

    .rating-label {
        font-size: 0.8rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
        font-weight: 500;
    }

    .rating-stars {
        color: #ffc107;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .rating-comment {
        font-size: 0.85rem;
        color: #495057;
        font-style: italic;
        line-height: 1.4;
        max-height: 3.6em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* 操作按钮 */
    .evaluation-actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-action {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        border-radius: 6px;
        border: none;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-primary-action {
        background: #667eea;
        color: white;
    }

    .btn-primary-action:hover {
        background: #5a6fd8;
        transform: translateY(-1px);
        color: white;
    }

    .btn-success-action {
        background: #28a745;
        color: white;
    }

    .btn-success-action:hover {
        background: #218838;
        transform: translateY(-1px);
        color: white;
    }

    .btn-warning-action {
        background: #ffc107;
        color: #212529;
    }

    .btn-warning-action:hover {
        background: #e0a800;
        transform: translateY(-1px);
        color: #212529;
    }

    /* 空状态 */
    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }

    .empty-state i {
        color: #667eea;
        margin-bottom: 1rem;
    }

    .empty-state h4 {
        color: #495057;
        margin-bottom: 0.5rem;
    }

    .empty-state p {
        color: #6c757d;
        margin-bottom: 1.5rem;
    }

    /* 导航标签 */
    .nav-tabs {
        border: none;
        margin-bottom: 2rem;
    }

    .nav-tabs .nav-link {
        border: none;
        color: #6c757d;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        margin-right: 0.5rem;
        transition: all 0.2s ease;
    }

    .nav-tabs .nav-link.active {
        background: #667eea;
        color: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

    .nav-tabs .nav-link:hover:not(.active) {
        background: #f8f9fa;
        color: #495057;
    }

    /* 待评价提醒 */
    .pending-alert {
        background: linear-gradient(135deg, #ff6b6b, #ffa500);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .pending-alert h5 {
        color: white;
        margin-bottom: 0.5rem;
    }

    .pending-alert .btn {
        background: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.3);
        color: white;
    }

    .pending-alert .btn:hover {
        background: rgba(255,255,255,0.3);
        border-color: rgba(255,255,255,0.5);
        color: white;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .page-header {
            padding: 1.5rem 0;
            margin-bottom: 1.5rem;
        }

        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .filter-row {
            grid-template-columns: 1fr;
        }

        .evaluation-header {
            flex-direction: column;
            gap: 0.5rem;
            align-items: start;
        }

        .evaluation-meta {
            grid-template-columns: 1fr;
            gap: 0.5rem;
        }

        .ratings-section {
            grid-template-columns: 1fr;
        }

        .evaluation-actions {
            flex-direction: column;
        }

        .btn-action {
            justify-content: center;
        }
    }

    @media (max-width: 576px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }

        .container-fluid {
            padding: 0.5rem;
        }

        .evaluation-card {
            padding: 1rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 导航标签 -->
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="{{ url_for('evaluations.index') }}">
                <i class="fas fa-star me-2"></i>全部评价
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for('evaluations.pending') }}">
                <i class="fas fa-clock me-2"></i>待评价
            </a>
        </li>
    </ul>

    <!-- 待评价提醒 -->
    {% if pending_evaluations %}
    <div class="alert pending-alert" role="alert">
        <h5><i class="fas fa-bell me-2"></i>待评价提醒</h5>
        <p class="mb-2">您有 <strong>{{ pending_evaluations|length }}</strong> 个课程待评价，请及时完成评价。</p>
        <a href="{{ url_for('evaluations.pending') }}" class="btn btn-sm">
            <i class="fas fa-arrow-right me-1"></i>去评价
        </a>
    </div>
    {% endif %}

    <!-- 统计概览 -->
    <div class="stats-overview">
        <h6 class="mb-3">
            <i class="fas fa-chart-bar me-2"></i>评价统计
        </h6>
        <div class="stats-grid">
            <div class="stat-item">
                <div class="stat-number">{{ evaluations|length }}</div>
                <div class="stat-label">评价总数</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">{{ pending_evaluations|length }}</div>
                <div class="stat-label">待评价</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">
                    {% set completed = evaluations|selectattr('is_completed')|list %}
                    {{ completed|length }}
                </div>
                <div class="stat-label">已完成</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">
                    {% if user_type == 'student' %}
                        {% set avg_ratings = evaluations|selectattr('coach_rating')|map(attribute='coach_rating')|list %}
                    {% else %}
                        {% set avg_ratings = evaluations|selectattr('student_rating')|map(attribute='student_rating')|list %}
                    {% endif %}
                    {% if avg_ratings %}
                        {{ "%.1f"|format(avg_ratings|sum / avg_ratings|length) }}
                    {% else %}
                        0.0
                    {% endif %}
                </div>
                <div class="stat-label">平均评分</div>
            </div>
        </div>
    </div>

    <!-- 筛选面板 -->
    <div class="filter-panel">
        <h6><i class="fas fa-filter me-2"></i>筛选条件</h6>
        <form method="GET">
            <div class="filter-row">
                <div>
                    {{ filter_form.status.label(class="form-label") }}
                    {{ filter_form.status(class="form-select") }}
                </div>
                <div>
                    {{ filter_form.rating.label(class="form-label") }}
                    {{ filter_form.rating(class="form-select") }}
                </div>
                <div>
                    {{ filter_form.start_date.label(class="form-label") }}
                    {{ filter_form.start_date(class="form-control") }}
                </div>
                <div>
                    {{ filter_form.end_date.label(class="form-label") }}
                    {{ filter_form.end_date(class="form-control") }}
                </div>
                {% if user_type == 'student' %}
                <div>
                    {{ filter_form.coach_id.label(class="form-label") }}
                    {{ filter_form.coach_id(class="form-select") }}
                </div>
                {% endif %}
                <div>
                    <label class="form-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        {{ filter_form.submit(class="btn btn-primary btn-sm") }}
                        <a href="{{ url_for('evaluations.index') }}" class="btn btn-outline-secondary btn-sm">重置</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- 评价列表 -->
    {% if evaluations %}
        <div class="evaluation-list">
            {% for evaluation in evaluations %}
            <div class="evaluation-card">
                <!-- 评价标题和状态 -->
                <div class="evaluation-header">
                    <h5 class="evaluation-title">
                        {% if user_type == 'student' %}
                            与教练 {{ evaluation.coach_name or '未知教练' }} 的课程
                        {% else %}
                            与学员 {{ evaluation.student_name or '未知学员' }} 的课程
                        {% endif %}
                    </h5>
                    <!-- 状态标签 -->
                    {% if evaluation.is_completed %}
                        <span class="status-badge status-completed">双方已评价</span>
                    {% elif (user_type == 'student' and evaluation.student_rating) or (user_type == 'coach' and evaluation.coach_rating) %}
                        <span class="status-badge status-partial">我已评价</span>
                    {% else %}
                        <span class="status-badge status-pending">待评价</span>
                    {% endif %}
                </div>

                <!-- 课程信息 -->
                <div class="evaluation-meta">
                    <div class="meta-item">
                        <i class="fas fa-calendar"></i>
                        <span>{{ evaluation.reservation['date'] }}</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-clock"></i>
                        <span>{{ evaluation.reservation['start_time'] }} - {{ evaluation.reservation['end_time'] }}</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-table-tennis"></i>
                        <span>{{ evaluation.reservation['table_name'] }}</span>
                    </div>
                </div>

                <!-- 评分展示 -->
                <div class="ratings-section">
                    <!-- 学员评价 -->
                    <div class="rating-item">
                        <div class="rating-label">学员评价</div>
                        {% if evaluation.student_rating %}
                            <div class="rating-stars">{{ evaluation.student_rating_stars }}</div>
                            {% if evaluation.student_comment %}
                                <div class="rating-comment">{{ evaluation.student_comment }}</div>
                            {% endif %}
                        {% else %}
                            <div class="text-muted">暂无评价</div>
                        {% endif %}
                    </div>

                    <!-- 教练评价 -->
                    <div class="rating-item">
                        <div class="rating-label">教练评价</div>
                        {% if evaluation.coach_rating %}
                            <div class="rating-stars">{{ evaluation.coach_rating_stars }}</div>
                            {% if evaluation.coach_comment %}
                                <div class="rating-comment">{{ evaluation.coach_comment }}</div>
                            {% endif %}
                        {% else %}
                            <div class="text-muted">暂无评价</div>
                        {% endif %}
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="evaluation-actions">
                    <a href="{{ url_for('evaluations.detail', evaluation_id=evaluation.id) }}"
                       class="btn-action btn-primary-action">
                        <i class="fas fa-eye"></i>查看详情
                    </a>

                    {% if not evaluation.is_completed %}
                        {% if (user_type == 'student' and not evaluation.student_rating) or (user_type == 'coach' and not evaluation.coach_rating) %}
                            <a href="{{ url_for('evaluations.create', reservation_id=evaluation.reservation_id) }}"
                               class="btn-action btn-success-action">
                                <i class="fas fa-star"></i>立即评价
                            </a>
                        {% endif %}
                    {% endif %}

                    {% if (user_type == 'student' and evaluation.student_rating) or (user_type == 'coach' and evaluation.coach_rating) %}
                        <a href="{{ url_for('evaluations.edit', evaluation_id=evaluation.id) }}"
                           class="btn-action btn-warning-action">
                            <i class="fas fa-edit"></i>修改评价
                        </a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- 分页 -->
        {% if pagination and pagination.pages > 1 %}
        <nav aria-label="评价列表分页" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if pagination.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('evaluations.index', page=pagination.prev_num, **filter_params) }}">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                {% endif %}

                {% for page_num in pagination.iter_pages() %}
                    {% if page_num %}
                        {% if page_num != pagination.page %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('evaluations.index', page=page_num, **filter_params) }}">
                                    {{ page_num }}
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item active">
                                <span class="page-link">{{ page_num }}</span>
                            </li>
                        {% endif %}
                    {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">…</span>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if pagination.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('evaluations.index', page=pagination.next_num, **filter_params) }}">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}

    {% else %}
        <!-- 空状态 -->
        <div class="empty-state">
            <i class="fas fa-star fa-3x"></i>
            <h4>暂无评价记录</h4>
            <p>完成课程后即可进行评价</p>
            {% if pending_evaluations %}
                <a href="{{ url_for('evaluations.pending') }}" class="btn btn-primary">
                    <i class="fas fa-star me-1"></i>去评价 ({{ pending_evaluations|length }})
                </a>
            {% endif %}
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 日期选择器
    $('input[type="date"]').on('change', function() {
        $(this).closest('form').submit();
    });

    // 筛选表单自动提交
    $('.filter-section select').on('change', function() {
        $(this).closest('form').submit();
    });

    // 工具提示
    $('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
{% endblock %}